﻿@{
    ViewData["Title"] = "BOM管理";
}
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />

<script src="~/layui/layui.js"></script>
<script src="~/js/site.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<div style="padding: 10px; height: 100vh; display: flex; flex-direction: column;">
    <div style="margin-bottom: 10px;">
        <h2 style="margin: 0 0 10px 0;">BOM管理</h2>
        
        <!-- 操作按钮区域 -->
        <div style="margin-bottom: 10px;">
            <button class="layui-btn layui-btn-normal" id="addBOMBtn">
                <i class="layui-icon layui-icon-add-1"></i> 新增BOM
            </button>
            <button class="layui-btn layui-btn-primary" id="refreshBtn">
                <i class="layui-icon layui-icon-refresh"></i> 刷新
            </button>
            <a href="/Home/Index" class="layui-btn layui-btn-normal">
                <i class="layui-icon layui-icon-home"></i> 返回主页
            </a>
        </div>
    </div>
    
    <!-- BOM数据表格 - 全屏显示 -->
    <div style="flex: 1; overflow: hidden;">
        <table id="bomTable" lay-filter="bomTable"></table>
    </div>
</div>

<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    
    // 初始化表格 - 先使用空数据
    table.render({
        elem: '#bomTable',
        data: [], // 先使用空数据
        parseData: function(res) {
            // 解析后端返回的数据格式
            console.log('API响应数据:', res);
            if(res.data && res.data.length > 0) {
                console.log('第一条数据字段:', Object.keys(res.data[0]));
                console.log('第一条数据内容:', res.data[0]);
                console.log('所有字段名详情:');
                Object.keys(res.data[0]).forEach(function(key) {
                    console.log('字段名:', key, '值:', res.data[0][key]);
                });
            }
            
            // 确保返回的数据格式正确
            var result = {
                "code": res.code,
                "msg": res.msg,
                "count": res.data ? res.data.length : 0,
                "data": res.data || []
            };
            console.log('parseData返回结果:', result);
            return result;
        },
        page: true,
        cols: [[
            {field: 'bomId', title: 'BOM ID', width: 80, sort: true},
            {field: 'boMtheme', title: 'BOM主题', width: 200, templet: function(d){
                return '<div style="white-space: normal; word-wrap: break-word; line-height: 1.4;">' + (d.boMtheme || d.bomtheme || '') + '</div>';
            }},
            {field: 'bomVersion', title: 'BOM版本', width: 100},
            {field: 'productName', title: '产品名称', width: 200, templet: function(d){
                return '<div style="white-space: normal; word-wrap: break-word; line-height: 1.4;">' + (d.productName || '') + '</div>';
            }},
            {field: 'materialName', title: '物料名称', width: 150, templet: function(d){
                return '<div style="white-space: normal; word-wrap: break-word; line-height: 1.4;">' + (d.materialName || '') + '</div>';
            }},
            {field: 'specification', title: '规格型号', width: 250, templet: function(d){
                return '<div style="white-space: normal; word-wrap: break-word; line-height: 1.4;">' + (d.specification || '') + '</div>';
            }},
            {field: 'dayNum', title: '天数', width: 80},
            {field: 'bomDesc', title: 'BOM描述', width: 150, templet: function(d){
                return '<div style="white-space: normal; word-wrap: break-word; line-height: 1.4;">' + (d.bomDesc || '') + '</div>';
            }},
            {field: 'partNum', title: '零件数量', width: 100},
            {field: 'lossRate', title: '损耗率', width: 100},
            {title: '操作', width: 250, toolbar: '#operationBar'}
        ]],
        limits: [15, 30, 50, 100],
        limit: 15,
        height: 'full-200',
        text: {
            none: '暂无数据'
        },
        done: function(res, curr, count) {
            console.log('表格渲染完成:', res);
            console.log('当前页:', curr);
            console.log('总数据量:', count);
            
            // 测试直接显示数据
            if(res.data && res.data.length > 0) {
                console.log('测试显示第一条数据的所有字段:');
                var firstRow = res.data[0];
                console.log('bomId:', firstRow.bomId);
                console.log('boMtheme:', firstRow.boMtheme);
                console.log('bomVersion:', firstRow.bomVersion);
                console.log('productName:', firstRow.productName);
                console.log('materialName:', firstRow.materialName);
                console.log('specification:', firstRow.specification);
                console.log('dayNum:', firstRow.dayNum);
                console.log('bomDesc:', firstRow.bomDesc);
                console.log('partNum:', firstRow.partNum);
                console.log('lossRate:', firstRow.lossRate);
            }
        }
    });
    
    // 新增BOM按钮点击事件
    $('#addBOMBtn').on('click', function(){
        window.location.href = '/Home/AddBOM';
    });
    
    // 刷新按钮点击事件
    $('#refreshBtn').on('click', function(){
        loadBOMData();
        layer.msg('数据已刷新', {icon: 1});
    });
    

    
    // 表格工具栏事件
    table.on('tool(bomTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            // 编辑功能 - 跳转到修改页面，传递产品ID
            window.location.href = '/Home/UpdateBOM?productId=' + data.productId;
        } else if(obj.event === 'detail'){
            // 详情功能 - 跳转到详情页面，传递BOM ID
            window.location.href = '/Home/DetailBOM?bomId=' + data.bomId;
        } else if(obj.event === 'del'){
            // 删除功能
            layer.confirm('确定删除这条BOM记录吗？<br><br>BOM主题: ' + (data.boMtheme || data.bomtheme || '未知') + '<br>BOM版本: ' + (data.bomVersion || '未知') + '<br>产品: ' + (data.productName || '未知'), {
                icon: 3,
                title: '删除确认',
                btn: ['确定删除', '取消']
            }, function(index){
                // 删除BOM的Ajax请求
                $.ajax({
                    url: 'http://localhost:5025/api/BOM/DelBOM',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ BOMId: data.bomId }),
                    success: function(response){
                        console.log('删除响应:', response);
                        if(response.code === 200){
                            layer.msg('删除成功！', {
                                icon: 1,
                                time: 2000
                            }, function(){
                                // 删除成功后刷新表格数据
                                loadBOMData();
                            });
                        } else {
                            layer.msg(response.msg || '删除失败', {
                                icon: 2,
                                time: 3000
                            });
                        }
                    },
                    error: function(xhr, status, error){
                        console.error('删除请求失败:', xhr.responseText);
                        layer.msg('删除请求失败：' + error, {
                            icon: 2,
                            time: 3000
                        });
                    }
                });
                layer.close(index);
            });
        }
    });
    
    // 页面加载完成后加载数据
    $(document).ready(function(){
        console.log('GetBOM页面加载完成');
        loadBOMData();
    });
    
    // 加载BOM数据的函数
    function loadBOMData() {
        $.ajax({
            url: 'http://localhost:5025/api/BOM/GetBOM',
            type: 'GET',
            success: function(response) {
                console.log('BOM列表API测试成功:', response);
                if(response.code === 200 && response.data) {
                    console.log('BOM数据条数:', response.data.length);
                    
                    // 更新表格数据
                    console.log('更新表格数据...');
                    table.reload('bomTable', {
                        data: response.data
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('BOM列表API测试失败:', error);
                layer.msg('API连接失败，请检查后端服务是否启动', {icon: 2});
            }
        });
    }
});
</script>

<!-- 操作栏模板 -->
<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">
        <i class="layui-icon layui-icon-list"></i> 详情
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
</script>

<style>
/* 全屏布局样式 */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

h2 {
    color: #333;
    border-bottom: 2px solid #5FB878;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* 表格样式优化 */
.layui-table {
    font-size: 14px;
}

.layui-table td, .layui-table th {
    padding: 12px 8px;
    vertical-align: middle;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

.layui-table-cell {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
}

/* 表格行高度自适应 */
.layui-table tbody tr {
    height: auto;
    min-height: 50px;
}

/* 表格内容区域样式 */
.layui-table-main {
    overflow-x: auto;
}

/* 确保表格内容不被截断 */
.layui-table-box {
    overflow: visible;
}
    margin-top: 20px;
}

.layui-badge {
    font-size: 12px;
}

.layui-btn-xs {
    padding: 0 8px;
    font-size: 12px;
}

.layui-table-cell {
    height: auto;
    line-height: 1.5;
    padding: 8px 15px;
}
</style>